<template>
        <div class="login-wrap">
            <div class="ms-login">
                <div class="ms-title">后台管理系统</div>
                <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <el-input v-model="param.username" placeholder="username">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input v-model="param.email" placeholder="email">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="param.phone" placeholder="phone">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                            </el-input>
                    </el-form-item>
                    
                    <div class="login-btn">
                        <button @click="submitForm()">确认</button>
                    </div>
                </el-form>
            </div>
        </div>
    </template>
    
    <script>
    import { sendemail } from "../../api/api.js";
    
    export default {
        data: function() {
            return {
                param: {
                    username: this.username,
                    email: this.email,
                    phone:this.phone,
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                },
            };
        },
        methods: {
            submitForm() {
                var params = {
                    username:this.param.username,
                    email: this.param.email,
                    phone:this.param.phone,
                }
                sendemail(params).then(res => {
                    // alert('邮件已发送,请前往邮箱修改密码')
                    this.$message.success(res.message);
                   
                })
                this.$router.push({path:'/login'})
            },
        },
    };
    </script>
    
    <style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bg.jpg);
        background-size: 100%;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
    .ms-content {
        padding: 30px 30px;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
    </style>